<script setup>
	import { ref } from 'vue'
	const popupRef = ref(null)

	// 打开弹出层
	const popupOpen = () => {
		popupRef.value.open()
	}

	// 关闭弹出层
	const popupClose = () => {
		popupRef.value.close()
	}

	// 向外暴露方法
	defineExpose({
		popupOpen,
		popupClose
	})

	// 接收父组件传递的数据 orderId amount
	const props = defineProps({
		orderId: String,
		amount: {
			type: [String, Number],
			default: 0
		}
	})

	const activeIndex = ref(1)

	// 子组件需要传递数据给父组件
	const emit = defineEmits(['choosePayment', 'close', 'confirm'])

	// 切换支付方式
	const changePaymentMethod = (index) => {
		activeIndex.value = index
		emit('choosePayment', { paymentMethod: index })
	}

	const paymentMethods = [
		{
			title: '微信支付',
			icon: '/static/images/wechatpay-icon.png'
		},
		{
			title: '支付宝支付',
			icon: '/static/images/alipay-icon.png'
		}
	]
</script>

<template>
	<uni-popup ref="popupRef" type="bottom" :is-mask-click="false">
		<view class="payment-container">
			<view class="payment-header">
				<text class="title">选择支付方式</text>
				<uni-icons
					class="uni-icons-close"
					size="18"
					color="#333"
					type="closeempty"
					@click="$emit('close')"
				/>
			</view>
			<view class="order-amount">¥ {{ props.amount }}元</view>
			<uni-list :border="false">
				<uni-list-item
					v-for="(item, index) in paymentMethods"
					:key="item.text"
					:title="item.title"
					:thumb="item.icon"
					@click="changePaymentMethod(index)"
					clickable
				>
					<template #footer>
						<uni-icons
							v-if="activeIndex === index"
							size="26"
							color="#16C2A3"
							type="checkbox-filled"
						/>
						<uni-icons v-else size="26" color="#d1d1d1" type="circle" />
					</template>
				</uni-list-item>
			</uni-list>
			<button class="uni-button" @click="$emit('confirm')">立即支付</button>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	.payment-container {
		min-height: 400rpx;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		padding: 10rpx 30rpx 40rpx;

		.payment-header {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #333;
			position: relative;
		}

		.uni-icons-close {
			position: absolute;
			top: 2rpx;
			right: 0;
		}

		.order-amount {
			padding: 10rpx 0 10rpx;
			text-align: center;
			font-size: 40rpx;
			color: #333;
		}

		:deep(.uni-list-item__container) {
			padding: 40rpx 0 !important;
		}

		:deep(.uni-list-item--hover) {
			background-color: #fff !important;
		}

		:deep(.uni-list-item__icon) {
			margin-right: 0;
		}

		.uni-button {
			margin-top: 40rpx;
		}
	}
</style>
